import React from "react";
import BaseComponent from "@/BaseComponent";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import "./login.less";
import { Card, Form, Input, Button } from "antd";
import { userActions } from "@redux/modules/user";

const layout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 5,
    span: 5,
  },
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

class Login extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {};
    this.onFinish = this.onFinish.bind(this);
  }

  onFinish(value) {
    this.props.login(value);
  }

  render() {
    return (
      <div className="login">
        <Card hoverable title="计算机学院后台管理系统">
          <Form
            {...layout}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={this.onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[
                { required: true, message: "请输入用户名!" },
                { min: 2, message: "用户名大于2位" },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: "请输入密码!" }]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button block type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  userInfo: state.userReducer.get("userInfo"),
});

const mapDispatchToProps = (dispatch) =>
  bindActionCreators(userActions, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Login);
